import { type FC, useRef } from 'react';
import { View } from 'react-native';
import { useSafeState, useMemoizedFn } from 'ahooks';
import { Gallery, type GalleryType, } from 'react-native-zoom-toolkit';
import GalleryImage from './galleryImage';
import Indicator from './indicator';
import styles from './styles';

type ZoomViewerProps = {
  height: number;
  onClose?: () => void;
  urls: string[];
  index: number;
}

const ZoomViewer: FC<ZoomViewerProps> = (props) => {
  const { urls, index: _index, onClose, height } = props;
  const ref = useRef<GalleryType>(null);
  const [index, setIndex] = useSafeState(_index);

  const renderItem = useMemoizedFn((url: string,) => {
    return <GalleryImage url={url} />;
  });

  return (
    <View style={[styles.container, { height }]}>
      <Gallery
        ref={ref}
        data={urls}
        onTap={onClose}
        initialIndex={_index}
        renderItem={renderItem}
        onIndexChange={setIndex}
      />
      <Indicator
        index={index}
        total={urls.length}
      />
    </View>
  );
}

export default ZoomViewer;